/**
 * @description 组合概览个基事件模块
 * @author muisuidaan
 */
import React, { useState, useEffect } from "react";

import { Progress, Popover, Divider } from "antd";
import EventList, {
  itemProps,
  InfoProps,
} from "@/pages/PortfolioOverview/components/EventList";
import FundOverview from "../FundOverview";
import RemarkSetting from "./RemarkSetting";

// import * as echarts from "echarts";

import cn from "classnames";

import styles from "./index.less";
import common_pop from "@/styles/popover.less";

interface Props {
  active?: boolean;
  info?: itemProps & InfoProps;
  changeCardState: (info: itemProps & InfoProps) => void;
  outEventCode?: string; //事件code
  outId?: string; //事件id
  outInnerCode?: string; //基金innerCode
  time?: string | number; // 重复点击一个内容时用这个来触发
  changeLoadState: (bool: boolean) => void;
  deleteTime: () => void;
  canSetRemark?: boolean; //是否有编辑备注权限
}

const FundCard = (props: Props) => {
  const {
    active,
    info,
    changeCardState,
    outId,
    outInnerCode,
    time,
    changeLoadState,
    deleteTime,
    canSetRemark,
  } = props || {};

  // console.log('FundCard-props',props);

  const { fundLableList = [] } = info || {};
  const [visiable, setVisiable] = useState(false);
  const [fundInfo, setFundInfo] = useState({});

  const [cusSelect, setCuSelect] = useState("1");
  const [popVisible, setPopVisible] = useState(false);

  const [hoverIn, setHoverIn] = useState(false);

  const [remarkText,setRemarkText] = useState(info?.remark);

  useEffect(()=>{
    setRemarkText(remarkText);
  },[info?.remark])

  const onOpenFundOview = (info) => {
    setHoverIn(false);//修复点击基金概览以后编辑备注按钮不消失的问题
    setFundInfo(info);
    setVisiable(true);
  };

  const handleSetting = (remark:string) => {
    if(remark == info?.remark){
      setPopVisible(false);
    }
    setRemarkText(remark);
    setPopVisible(false);
    
  };

  const PopoverContainer = (chilredn) => {
    return (
      <Popover
        visible={popVisible}
        // getPopupContainer={()=>document.getElementById(`fund_card_box${info?.id}`)}
        placement="bottom"
        content={
          <RemarkSetting
            visible={popVisible}
            saveFormValues={handleSetting}
            remark={remarkText}
            innerCode={info?.innerCode}
            

          />
        }
        trigger="click"
        overlayClassName={styles.popoverStyle}
        overlayInnerStyle={{ width: 246 }}
        // autoAdjustOverflow={false}
      >
        {chilredn}
      </Popover>
    );
  };

  const onChangeRemark = (text:string)=>{
    setRemarkText(text);
  }

  return (
    <div
      className={styles.fund_card_wrapper}
      // style={{ paddingBottom: fundLableList?.length > 0 ? 4 : 10 }}
      onMouseEnter={() => {
        !visiable&&setHoverIn(true);
      }}
      onMouseLeave={() => {
        !visiable&&setHoverIn(false);
      }}
      // id={info?.innerCode}
    >
      {visiable && (
        <FundOverview
          visible={visiable}
          fundInfo={{...fundInfo,remark:remarkText,remarkText}}
          toggleModal={setVisiable}
          changeRemark={onChangeRemark}//基金概览修改了备注
          canSetRemark={canSetRemark}//是否是创建人，非组合创建人无编辑权限
        />
      )}
      <div
        className={styles.fund_card_box}
        // id={`fund_card_box${info?.id}`}
        onClick={() => {
          changeCardState(info);
        }}
      >
        {remarkText ? (
          <>
            <div className={styles.remarks} title={remarkText || ""}>
              <p className={styles.text}>{remarkText}</p>
              {/* {console.log('hoverIn',hoverIn,'popVisible',popVisible)} */}
              { canSetRemark && PopoverContainer(
                <div
                  // id={`remark-setting${info?.id}`}
                  className={cn(styles.setting_btn)}
                  style={{
                    visibility: hoverIn
                      ? "visible"
                      : popVisible
                      ? "visible"
                      : "hidden",
                    opacity:hoverIn
                    ? 1
                    : popVisible
                    ? 1
                    : 0,
                  }}
                  onClick={(e) => {
                    !popVisible && setPopVisible(true);
                    e.stopPropagation();
                  }}
                >
                  编辑备注
                </div>
              )}
            </div>
          </>
        ) : (
          canSetRemark && PopoverContainer(
            <div
              // id={`remark-setting${info?.id}`}
              className={cn(styles.setting_btn, styles.setting_btn_no_data)}
              onClick={(e) => {
                !popVisible && setPopVisible(true);
                e.stopPropagation();
              }}
              style={{
                visibility: hoverIn
                  ? "visible"
                  : popVisible
                  ? "visible"
                  : "hidden",
                  opacity:hoverIn
                  ? 1
                  : popVisible
                  ? 1
                  : 0,
              }}
            >
              编辑备注
            </div>
          )
        )}

        <div className={styles.title_info}>
          <p className={styles.title_title}>
            <span>监控 (近1年)</span>
          </p>
          <p
            className={cn(
              styles.title_count,
              active && styles.title_count_active
            )}
          >
            <span>
              {info?.eventNum || info?.eventNum === 0
                ? info?.eventNum > 9999
                  ? "9999..."
                  : info?.eventNum || 0
                : "-"}
              条
            </span>
          </p>
        </div>
        <div
          className={styles.fund_card_container}
          style={{paddingTop:remarkText?24:16}}
          // style={{ paddingTop: !remarkText && canSetRemark ? 0 :!remarkText&&!canSetRemark  !?6 : 16 }}
        >
          <div className={styles.circle_wrapper}>
            <Progress
              type="circle"
              percent={Number(info?.ratioInTotalAsset) * 100}
              width={60}
              strokeWidth={4}
              strokeColor={"#748295"}
              trailColor={"rgba(215, 222, 234, .5)"}
              format={(percent: number) => (
                <div className={styles.percent_wrapper}>
                  <p className={styles.percent}>
                    {percent.toFixed(2)}
                    <em>%</em>
                  </p>
                  <p className={styles.remarks}>占比</p>
                </div>
              )}
            ></Progress>
          </div>
          <div className={styles.info_wrapper}>
            <div className={styles.info}>
              <div
                title={`${info?.secuAbbr || "-"}（${info?.secuCode || "-"})`}
                className={styles.info_title}
                onClick={(event) => {
                  event.stopPropagation();
                  onOpenFundOview(info);
                }}
              >
                {info?.secuAbbr || "-"}（{info?.secuCode || "-"})
              </div>
              {/* <div className={styles.div_line}></div> */}
              <div className={styles.range}>
                <p className={styles.range_gray}>｜买入后涨跌幅：</p>
                <p
                  className={
                    info?.colour === 1
                      ? styles.range_high_light
                      : info?.colour === 2
                      ? styles.range_low_light
                      : styles.range_nomal
                  }
                >
                  {info?.colour || info?.colour === 0
                    ? `${
                        info.colour === 1 ? "+" : info.colour === 2 ? "-" : ""
                      }${info.fluctuationRange}`
                    : "-"}
                </p>
              </div>
            </div>
            <div className={styles.manager}>{info?.manageName || "-"}</div>
            <div className={styles.fund_tags}>
              {fundLableList?.length > 0 &&
              Object.keys(fundLableList[0])?.length > 0
                ? Object.keys(fundLableList[0]).map(
                    (item: any, index: number) => {
                      return (
                        <Popover
                          key={item}
                          placement="bottom"
                          // visible={true}
                          // overlayStyle={{ maxWidth: "70%" }}
                          overlayClassName="popoverDarkStyle"
                          content={
                            (Object.keys(info?.fundLableList[0])[
                              index
                            ] as React.ReactNode) || "-"
                          }
                        >
                          <p className={styles.fund_tag}>
                            <span>
                              {Object.values(info?.fundLableList[0])[index] ||
                                "-"}
                            </span>
                          </p>
                        </Popover>
                      );
                    }
                  )
                : null}
            </div>
          </div>
        </div>
      </div>
      {active && (
        <EventList
          info={info}
          visiable={active}
          time={time}
          outId={outId}
          changeLoadState={changeLoadState}
          deleteTime={deleteTime}
        />
      )}
    </div>
  );
};

export default FundCard;
